<template>
  <view :data-theme="globPrimary">
    <u-navbar title="个人信息" :custom-back="onBack"></u-navbar>
    <view class="user-cell">
      <u-cell-group :border="false">
        <u-cell-item title="更换头像" :title-style="titleStyle" :arrow="false" hover-class="none">
          <u-avatar
            :src="avatar.url || userInfo.avatar_url"
            size="100"
            @click="chooseAvatar"
          ></u-avatar>
        </u-cell-item>
        <u-cell-item
          title="账号"
          :value="userInfo.user_name"
          :arrow="false"
          :title-style="titleStyle"
          hover-class="none"
          v-if="userInfo.rest_times == 0"
        ></u-cell-item>
        <u-cell-item
          title="账号"
          :arrow="false"
          :title-style="titleStyle"
          hover-class="none"
          v-else
        >
          <u-input
            v-model="userInfo.user_name"
            placeholder="请输入账号"
            input-align="right"
            :clearable="false"
          />
        </u-cell-item>

        <u-cell-item title="昵称" :arrow="false" :title-style="titleStyle" hover-class="none">
          <u-input
            v-model="userInfo.nick_name"
            placeholder="请输入昵称"
            input-align="right"
            :clearable="false"
            :maxlength="20"
          />
        </u-cell-item>
        <u-cell-item
          title="手机号"
          :value="userPhone"
          :title-style="titleStyle"
          hover-class="none"
          @click="path('/pageUser/setting/modifyPhone')"
        ></u-cell-item>
        <u-cell-item
          title="人脸认证"
          :value="faceStatusText"
          :title-style="titleStyle"
          hover-class="none"
          @click="
            $u.route({
              url: '/pageUser/setting/face',
            })
          "
        ></u-cell-item>
        <u-cell-item title="性别" :title-style="titleStyle" :arrow="false" hover-class="none">
          <u-radio-group
            slot="right-icon"
            v-model="userInfo.gender"
            :active-color="globPrimaryColor"
          >
            <u-radio name="1">男</u-radio>
            <u-radio name="2">女</u-radio>
            <u-radio name="0">保密</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="个性签名" :title-style="titleStyle" :arrow="false" hover-class="none">
          <view slot="right-icon" class="right"
            ><u-input v-model="userInfo.signature" type="textarea" :maxlength="50"
          /></view>
        </u-cell-item>
      </u-cell-group>
    </view>
    <edu-button class="save" type="primary" @click="add">保存</edu-button>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { uploadFile } from '@/utils/uploadFile.js'
export default {
  data() {
    return {
      titleStyle: {
        'font-size': '30rpx',
        color: '#303133',
      },
      options: {},
      avatar: {
        url: '',
        id: 0,
      },
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    userPhone() {
      return this.options.phone || this.userInfo.phone
    },
    faceStatusText() {
      return this.userInfo.face_verified ? '已认证' : '未认证'
    },
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onLoad(options) {
    this.options = options
  },
  created() {
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on('uAvatarCropper', (path) => {
      // 可以在此上传到服务端
      uploadFile('/upload/putFile', path).then((res) => {
        let data = res.data
        this.avatar.url = data.fileurl
        this.avatar.id = data.id
      })
    })
  },
  methods: {
    chooseAvatar() {
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 300,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 300,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: 'jpg',
        },
      })
    },
    add() {
      let params = {
        nick_name: this.userInfo.nick_name,
        avatar: this.avatar.id || this.userInfo.avatar,
        gender: this.userInfo.gender,
        signature: this.userInfo.signature,
        phone: this.userPhone,
      }
      if (this.userInfo.rest_times == 1) {
        params = {
          ...params,
          user_name: this.userInfo.user_name,
        }
      }
      this.$edu.api
        .putAccountEdit(params)
        .then((res) => {
          this.$u.toast(res.msg)
          // 获取个人信息
          this.$store.dispatch('user/setUserInfo', res.data)
          setTimeout(() => {
            this.$u.route({
              type: 'back',
              delta: this.options.phone ? 2 : 1,
            })
            // 设置用户头像
            this.$store.commit('user/setAvatar', this.userInfo.avatar_url)
          }, 1000)
        })
        .catch((err) => {})
    },
    path(url) {
      uni.preloadPage({ url: url })
      this.$u.route(url)
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.user-cell {
  .u-cell {
    line-height: 1;
  }
  .right {
    width: 500rpx;
  }
}
.save {
  width: 680rpx;
  position: fixed;
  bottom: 22rpx;
  z-index: 999;
  left: calc(50% - 340rpx);
}
</style>
